<template>
	<div class="com-container">
		<div class="com-chart" ref="stock_ref"></div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getThemeValue
	} from '@/utils/theme_utils'
	export default {
		name: 'Stock',
		data() {
			return {
				chartInstance: null,
				allData: [],
				echarttimerId: "",
				echartoption: {},
				currentIndex: 0
			}
		},
		created() {
			this.$socket.registerCallBack('stockData', this.getData)
		},
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'stockData',
				chartName: 'stock',
				value: ''
			})
			window.addEventListener("resize", this.screenAdapter);
			this.screenAdapter()
		},
		computed: {
			...mapState(['theme'])
		},
		destroyed() {
			clearInterval(this.echarttimerId);
			window.removeEventListener("resize", this.screenAdapter)
			this.$socket.unRegisterCallBack('stockData');
		},
		methods: {
			//初始化图表
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.stock_ref, this.theme);
				this.echartoption = {
					backgroundColor: getThemeValue(this.theme).backgroundColor,
					title: {
						text: '▎ 库存和销量分析',
						left: 20,
						top: 20
					}
				};
				this.chartInstance.setOption(this.echartoption);
				this.chartInstance.on("mouseover", () => {
					clearInterval(this.echarttimerId)
				});
				this.chartInstance.on("mouseout", () => {
					this.startInterval()
				});
			},
			//获取数据
			getData(ret) {
				// const {
				// 	data: ret
				// } = await this.$http.get("stock");
				this.allData = ret;
				this.updataChart()
			},
			//更新图表
			updataChart() {
				const centerArr = [
					["18%", "40%"],
					["50%", "40%"],
					["82%", "40%"],
					["34%", "75%"],
					["66%", "75%"]
				];
				const colorArr = [
					['#4FF778', '#0BA82C'],
					['#E5DD45', '#E8B11C'],
					['#E8821C', '#E55445'],
					['#5052EE', '#AB6EE5'],
					['#23E5E5', '#2E72BF']
				];
				const start = this.currentIndex * 5;
				const end = (this.currentIndex + 1) * 5;
				const StockData = this.allData.slice(start, end);
				const seriesArr = StockData.map((item, index) => {
					return {
						type: 'pie',
						center: centerArr[index],
						hoverAnimation: false,
						labelLine: {
							show: false
						},
						data: [{
							name: item.name + '\n' + item.sales,
							value: item.sales,
							label: {
								show: true,
								position: "center",
								textStyle: {
									color: colorArr[index][0]
								}
							},
							itemStyle: {
								color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: colorArr[index][0]
								}, {
									offset: 1,
									color: colorArr[index][1]
								}])
							}
						}, {
							value: item.stock,
							itemStyle: {
								color: '#333843'
							}
						}]
					}
				})
				const dataoption = {
					series: seriesArr
				};
				this.chartInstance.setOption(dataoption);
				this.startInterval();
			},
			startInterval() {
				if (this.echarttimerId) {
					clearInterval(this.echarttimerId);
				}
				this.echarttimerId = setInterval(() => {
					this.currentIndex++;
					if (this.currentIndex > 1) {
						this.currentIndex = 0;
					}
					this.updataChart()
				}, 3000);

			},
			screenAdapter() {
				const titleFontSize = this.$refs.stock_ref.offsetWidth / 100 * 3.6;
				const innerRadius = titleFontSize * 2;
				const outterRadius = innerRadius * 1.125;
				const adapterOtion = {
					title: {
						textStyle: {
							fontSize: titleFontSize
						}
					},
					series: [{
							type: 'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontsize: titleFontSize / 2
							}
						},
						{
							type: 'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontsize: titleFontSize / 2
							}
						},
						{
							type: 'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontsize: titleFontSize / 2
							}
						},
						{
							type: 'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontsize: titleFontSize / 2
							}
						},
						{
							type: 'pie',
							radius: [outterRadius, innerRadius],
							label: {
								fontsize: titleFontSize / 2
							}
						}
					]
				};
				this.chartInstance.setOption(adapterOtion);
				this.chartInstance.resize();
			}
		},
		watch: {
			theme() {
				console.log('主题切换了')
				this.chartInstance.dispose() // 销毁当前的图表
				this.initChart() // 重新以最新的主题名称初始化图表对象
				this.screenAdapter() // 完成屏幕的适配
				this.updataChart() // 更新图表的展示
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

</style>
